<template>
	<view class="box">
		<view class="shang">
			<view class="test">
				消息
			</view>
		</view>
		<view class="xia">
			<view class="box1">
				<image class="img" src="../../static/QQ.png"></image>
				<view class="box1-test">
					<view class="test1">
						AAA煤矿王老板
					</view>
					<view class="test2">
						几点送到货
					</view>
				</view>
				<view class="box1-time">
					一小时前
				</view>
			</view>
			<view class="box1">
				<image class="img" src="../../static/QQ.png"></image>
				<view class="box1-test">
					<view class="test1">
						AAA煤矿张老板
					</view>
					<view class="test2">
						结一下尾款
					</view>
				</view>
				<view class="box1-time">
					一小时前
				</view>
			</view>
			<view class="box1">
				<image class="img" src="../../static/QQ.png"></image>
				<view class="box1-test">
					<view class="test1">
						AAA煤矿李老板
					</view>
					<view class="test2">
						开始送了吗？
					</view>
				</view>
				<view class="box1-time">
					一小时前
				</view>
			</view>
		</view>

	</view>
</template>

<script>
</script>

<style lang="scss">
	.box {
		flex-direction: column;
		/* 垂直布局 */
		height: 100vh;
		/* 视口高度 */
		width: 100vw;
		/* 视口宽度 */
		background-color: #002fa7;
	}

	.shang {
		line-height: 70px;
		/* 设置行高等于盒子高度 */
		display: flex;
		height: 10%;
	}

	.test {
		color: #ffffff;
		font-size: 30px;
		margin-top: -10px;
		margin-left: 20rpx;
	}

	.xia {
		padding-top: 10rpx;
		height: 90%;
		background-color: #eeeeee;
		border-radius: 20rpx 20rpx 0 0;
	}

	.box1 {
		padding-top: 10rpx;
		display: flex;
		width: 100%;
		height: 50px;
		border-bottom: 1px solid #e3e3e3;
	}

	.img {
		width: 40px;
		height: 40px;
		margin-right: 10rpx;
		margin-left: 25rpx;
	}

	.box1-test {
		margin-left: 25rpx;
	}

	.test2 {
		color: #989898;
		font-size: 12px;
	}

	.box1-time {
		color: #6d6d6d;
		margin-top: 20rpx;
		position: absolute;
		right: 20rpx;
		font-size: 25rpx;
	}
</style>